<template>
	<view class="page">
		<view v-if="isShowVideo" class="video-page" :style="{'background-image': `url(../../static/images/video_bg.png)`}">
			<view class="videobox">
				<view class="videoinfo">
					<view ref="fullScreen" class="video" :style="vstyle">
						<videoShow ref="videoShow"  v-if="videoInfo.vo_files" :isReceiveHb="isReceiveHb" :videoUrl="videoInfo.vo_files" :poster="videoInfo.vi_img"
                            :play="isPlay" :isfahb="videoInfo.is_fahb === 1" :hbTime="videoInfo.hb_time" :platform="platform"
                            @showHB="openHbao" @overplay="overplay" @timeupdate="timeupdate" @changeDuration="changeDuration" @changQp="changeQp"></videoShow>
					</view>
					<view class="info white">
						<view class="name blod600 font_bold">{{videoInfo.title}}</view>
						<view class="acea-row row-between-wrapper">
							<view class="acea-row row-middle">
								<view class="avatar">
									<image :src="videoInfo.le_files"></image>
								</view>
								<view class="size12">讲师：{{videoInfo.le_name}}</view>
							</view>
							<view class="refresh" @click="refresh">
							<!-- <view class="refresh" @click="openHbao(2)"> -->
								<text class="iconfont icon-shuaxin size18"></text>
								<text style="margin-left: 10rpx;">刷新</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bgWhite padding20" :class="tabindex==0 ?'mainl':'mains'" style="margin-top: 20rpx;">
				<view class="problem">
					<view class="tips" v-if="!isAnswer">
						<text>温馨提示：{{tips}}</text>
					</view>
					<view class="tabbox acea-row row-middle">
						<block v-for="(tab,i) in tablist" :key="i" v-if="(i==0 && isComm) || i>0">
							<view :class="tabindex === i ? 'item checked':'item'" @click="changTab(i)">
								{{tab}}
							</view>
						</block>
					</view>
					<view class="content" style="margin-top: 20rpx;">
						<view class="comment" v-if="tabindex === 0 && isComm">
							<scroll-view 
							id="scrollcomm"
							:scroll-y="true" 
							:scroll-top="scrollTop"
							@scroll="scroll"
							@scrolltolower="scrolltolower" 
							:style="{height:'100%'}"
							>
								<view id="comment" class="comment-list">
									<block v-for="(comm,c) in commList" :key="comm.id">
										<view class="comm-list acea-row row-middle paddingt20">
											<view class="avatar">
												<image :src="comm.wx_img"></image>
											</view>
											<view class="min-box">
												<view class="top acea-row row-middle" v-if="comm.files !== null && comm.files !== ''">
													<view class="name blod500">{{comm.wx_name}}送了</view>
													<view class="files">
														<image :src="adminUrl+comm.files"></image>
													</view>
												</view>
												<view class="name hui" v-else>{{comm.wx_name}}</view>
												<view class="text" v-if="comm.text !== null && comm.text !== ''">{{comm.text}}</view>
											</view>
										</view>
									</block>
									<!-- <block v-if="showCl" v-for="(comms,cs) in commList" :key="'c'+cs">
										<view class="comm-list acea-row row-middle paddingt20">
											<view class="avatar">
												<image :src="comms.wx_img"></image>
											</view>
											<view class="min-box">
												<view class="top acea-row row-middle" v-if="comms.files !== null && comms.files !== ''">
													<view class="name blod500">{{comms.wx_name}}送了</view>
													<view class="files">
														<image :src="adminUrl+comms.files"></image>
													</view>
												</view>
												<view class="name hui" v-else>{{comms.wx_name}}</view>
												<view class="text" v-if="comms.text !== null && comms.text !== ''">{{comms.text}}</view>
											</view>
										</view>
									</block> -->
								</view>
							</scroll-view>
						</view>
						<view class="problem-list" v-if="tabindex === 1">
							<block v-for="(item,p) in problemList" :key="p">
								<view class="item">
									<view class="prob blod600 font_bold size13">
										{{p+1}}、
										<text class="dx" v-if="item.type===1">单选</text>
										<text class="dx" v-if="item.type===2">判断</text>
										{{item.title}}
									</view>
									<view class="prob-list paddingt20">
										<block v-for="(pr,r) in item.answer">
											<!-- <radio-group @change="selected">
												<label class="radio"> -->
													<view class="prob-item padding20 bgHui radius8 acea-row row-between-wrapper margint20" :class="pr.selected ? 'checked':''" @click="selected(p,r)">
														<!-- <radio :checked="pr.selected" :value="pr.daan" style="display: none;"></radio> -->
														<view class="left blod600">
															<text>{{pr.daan}}</text>
															<text style="padding-left: 20rpx;">{{pr.txt}}</text>
														</view>
														<view class="iconfont icon-duigouxiao" v-if="pr.selected"></view>
													</view>
												<!-- </label>
											</radio-group> -->
										</block>
									</view>
								</view>
							</block>
						</view>
						<view class="company padding10" v-if="tabindex === 2">
							<!-- <mp-html :content="videoInfo.systext" /> -->
							<image mode='aspectFit' v-if="videoInfo.posterFile !== ''" :src="adminUrl+videoInfo.posterFile" style="width: 100%; height:100%;"></image>
						</view>
						<view class="lecturer padding10" v-if="tabindex === 3">
							<mp-html :content="videoInfo.le_text" />
						</view>
					</view>
				</view>
			</view>
			<view class="bgWhite" style="height: 180rpx;"></view>
			<view class="submitbox paddingl20 acea-row row-between-wrapper" v-if="tabindex !== 0">
				<!-- <view class="pay" v-if="videoInfo.pr_id !== '' && videoInfo.pr_id > 0 " @click="shoppClick">
					<image src="../../static/images/car.png"></image>
				</view> -->
				<view class="btnbox">
					<view class="btn-box acea-row row-center-wrapper zoomable" v-if="isAnswer" @click="upAnswer">
						<view class="hbbg"></view>
						<view class="btn size18 white blod600">提交答案领取红包</view>
					</view>
				</view>
                <dianzan :currentLikeNode="currentLikeNode" :accumulateCount="accumulateCount" :typeName="dzType" @handleSpeciesClick="handleSpeciesClick"></dianzan>
                <!-- 金币 -->
                <!-- <view class="guzhang" v-if="showSpecies">
                    <like-button
                        :throttle="100" 
                        :large="2" 
                        :duration="1500" 
                        :high="100"
                        :imgWidth="100"
                        :imgHeight="100"
                        :showImgs="speciesShowImgs"
                        :alone="false"
                        @handleClick="handleSpeciesClick"
                     >
						<view class="guzhang-img"></view>
						<view class="bz-num" v-if="currentLikeNode !== null && currentLikeNode.dz_sum && currentLikeNode.dz_sum > 0">
						{{accumulateCount}}/{{currentLikeNode.dz_sum}}
						</view>
                    </like-button>
                </view> -->
                <!-- 点赞 -->
				<!-- <view class="baiz" v-else>
                    <like-button 
                        :throttle="100" 
                        :large="2" 
                        :duration="3000" 
                        :high="200"
                        :alone="false"
                        :showImgs="likeShowImgs"
                        @handleClick="handleLikeClick"
                     >
                        <view class="baiz-bg"></view>
                    </like-button>
                </view> -->
				
			</view>
			<view class="submitbox1 paddingl20 acea-row row-between-wrapper" v-if="tabindex === 0" :class="isSend?'submitbox3':'submitbox2'">
				<view class="input-box">
					<textarea 
					type="text" 
					placeholder="说点什么吧…" 
					v-model="msg" 
					:adjust-position="true" 
					:auto-blur="true" 
					placeholder-class="placehstyle"
					@confirm="sendComment"
					@focus="changeComm"
					@blur="blurComm"
				></textarea>
				</view>
				<view class="send bgRed white" v-if="isSend" @click="sendComment">发送</view>
                <view class="giftbt" v-if="!isSend" @click="showGift">
					<image src="../../static/images/gift.png"></image>
				</view>
				<dianzan v-if="!isSend" :currentLikeNode="currentLikeNode" :accumulateCount="accumulateCount" :typeName="dzType" @handleSpeciesClick="handleSpeciesClick"></dianzan>
				<!-- 金币 -->
                <!-- <view class="guzhang" v-if="showSpecies && !isSend">
                    <like-button
                        :throttle="100" 
                        :large="2" 
                        :duration="1500" 
                        :high="100"
                        :imgWidth="100"
                        :imgHeight="100"
                        :showImgs="speciesShowImgs"
                        :alone="false"
                        @handleClick="handleSpeciesClick"
                     >
						<view class="guzhang-img2"></view>
						<view class="bz-num" v-if="currentLikeNode !== null && currentLikeNode.dz_sum && currentLikeNode.dz_sum > 0">{{accumulateCount}}/{{currentLikeNode.dz_sum}}</view>
                    </like-button>
                </view> -->
                <!-- 点赞 -->
				<!-- <view class="baiz" v-if="!showSpecies && !isSend">
                    <like-button 
                        :throttle="100" 
                        :large="2" 
                        :duration="3000" 
                        :high="200"
                        :alone="false"
                        :showImgs="likeShowImgs"
                        @handleClick="handleLikeClick"
                     >
                        <view class="baiz-bg2"></view>
                    </like-button>
                </view> -->
			
			</view>
			<view class="shopbox" v-if="videoInfo.pr_id !== '' && videoInfo.pr_id > 0 "  @click="shoppClick">
				<view class="imgbox">
					<image :src="videoInfo.pr_files" mode="aspectFit"></image>
				</view>
				<view class="pay size12">预购</view>
			</view>
			<!-- 横屏点赞 -->
			<dianzan v-if="isHpShow" :currentLikeNode="currentLikeNode" :accumulateCount="accumulateCount" :typeName="dzType" @handleSpeciesClick="handleSpeciesClick" :styleObj="dzStyle"></dianzan>
			<!-- 横屏提示 -->
			<view class="tostbox" v-if="isHpShow && tostTitle !== ''">
				<text>{{tostTitle}}</text>
			</view>
			<!-- 提醒答题 -->
			<view class="upoup acea-row row-center-wrapper" v-if="isShowA" :style="hbstyle">
				<view class="upoup-bg" @click="goAnswer()"></view>
				<view class="txmid acea-row row-column row-center-wrapper bgWhite">
                   <view class="size18 blod600">视频已播放完成</view>
                   <view class="paddingt20">学习结束，别忘了参加有奖答题哦</view>
				   <view class="btn bgRed white paddingt20" @click="goAnswer()">去答题</view>
				</view>
			</view>
			<!-- 领取红包 -->
			<view class="upoup acea-row row-center-wrapper" v-if="isShowHb" :style="hbstyle">
			<!-- <view class="upoup acea-row row-center-wrapper"> -->
				<view class="upoup-bg"></view>
				<view class="hbmid" @click="getHbao">
                    <view class="hbmid-text">
                        <view class="hbmid-text-desc">
                            红包秒到微信钱包
                        </view>
                        <view class="hbmid-text-val">
                            <text class="hbmid-symbol">￥</text>
                            <text class="hbmid-num">{{ hbPrice || '0.00' }}</text>
                            <text class="hbmid-unit">元</text>
                        </view>
                    </view>
					<view class="btn zoomable"></view>
					<image :style="hbimgStyle" :src="hbimg" ></image>
				</view>
			</view>
			<!-- 购物 -->
			<view class="upoup acea-row row-center-wrapper" v-if="isPay">
				<view class="upoup-bg"></view>
				<view class="upoup-mid padding20">
					<view class="top acea-row row-between-wrapper">
						<view class="title size18 font_medium blod600" style="width: calc(100% - 50rpx);text-align: center;">产品预定</view>
						<view class="close acea-row row-right row-middle">
							<text class="iconfont icon-guanbi size22 blod600" @click="isPay = false"></text>
						</view>
					</view>
					<view class="main">
						<view class="product acea-row row-middle paddingt10">
							<view class="prictre" style="margin-right: 10rpx;">
								<image :src="videoInfo.pr_files"></image>
							</view>
							<view class="prinfo">
								<view class="title font_medium blod500">{{videoInfo.pr_title || '测试商品'}}</view>
								<view class="price acea-row row-middle paddingt10">
									<view class="hui size12" style="margin-right: 10rpx;">订金</view>
									<view class="prc yellow font_medium">
										<text class="size12">￥</text>
										<text class="size18">{{videoInfo.pr_price || '0.00'}}</text>
										<text class="size12">元</text>
									</view>
								</view>
								<view class="num-box acea-row row-middle ">
									<view class="size12" style="margin-right: 10rpx;">数量</view>
									<view class='carnum acea-row row-center-wrapper'>
										<view class="reduce" :class="sum > 1 ? 'on' : ''"
											@click.stop='subCart'>-</view>
										<view class='num'>{{sum}}</view>
										<view class="plus" :class="sum ? 'on' : ''"
											@click.stop='addCart'>+</view>
									</view>
								</view>
							</view>
						</view>
						<view class="infobox paddingt20">
							<view class="info-item acea-row row-between-wrapper">
								<view class="left">姓名</view>
								<view class="right">
									<input class="radius8 bgHui padding20 font_medium size15" type='text' name='user_name' v-model="user_name" placeholder="请输入姓名"></input>
								</view>
							</view>
							<view class="info-item acea-row row-between-wrapper margint20">
								<view class="left">手机</view>
								<view class="right">
									<input class="radius8 bgHui padding20 font_medium size15" type='number' name='user_tel' v-model="user_tel" maxlength="11" placeholder="请输入手机号"></input>
								</view>
							</view>
							<view class="info-item acea-row row-between-wrapper">
								<view class="left">地址</view>
								<view class="right">
									<input class="radius8 bgHui padding20 font_medium size15" type='text' name='user_address' v-model="user_address" maxlength="11" placeholder="请输入地址"></input>
								</view>
							</view>
						</view>
						<view class="explain red size12">*如果您在活动期间没有购买相应产品，订金将在活动结束7个工 作日内退还到您微信账户</view>
						<view class="submitbtn btn bgRed margint20 paddingt10" @click="pay">
							<view>提交预定</view>
							<view>总价￥{{totalPrice}}</view>
						</view>
					</view>
				</view>
			</view>		
		</view>
		<view class="upoup acea-row row-center-wrapper" v-if="!isShowVideo">
			<view class="upoup-bg"></view>
			<view class="upoup-mid padding20">
				<view class='pictrue'>
					<image :src="'../../static/images/nothing.png'"></image>
				</view>
				<view class="text-ccc font_medium blod600">
					<view>视频活动已结束</view>
					<view>下期活动敬请关注!</view>
				</view>
			</view>
		</view>
        <view class="giftbox padding20" v-if="isGiftShow">
			<view class="blod600">赠送礼物</view>
			<scroll-view :scroll-x="true">
				<view class="giftls acea-row-no acea-row row-middle">
					<block v-for="(gift,g) in giftList" :key="gift.id">
						<view class="gift" @click="sendGift(gift.id)">
							<view class="img acea-row row-center-wrapper">
								<image :src="adminUrl+gift.files"></image>
							</view>
							<view class="title hui">免费</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
        
        <lrlDragPanel initPosition="right" v-if="showJf">
            <image src="@/static/images/jifeng-icon.png" style="width: 100rpx;" mode="widthFix" @click="$u.route('/pages/integral/list')"></image>
        </lrlDragPanel>
		<auto-toast ref="autoToast" :styleObj="tostStyle"></auto-toast>
	</view>
</template>

<script>
    import lrlDragPanel from '@/components/lrl/components/lrl-drag-panel/lrl-drag-panel.vue'
	import { mapGetters } from "vuex";
	import videoShow from "@/components/videoShow.vue"
	import dianzan from "@/components/dianzan.vue"
	import {toUserLogin} from "@/libs/loginuser.js"
	import {getVideoInfo,
        getVideoQuestion,
        wxpay,
        getVideoHB,
        testQuestion,
        userVideoYN,
        editVideoTime,
        hdvideo_hb_suan,
        vo_pic_dz,
        getCommentList,
        getGiftList,
        sendComment,
        posterFile,
        vo_integral_user,
		vo_pic_js_dati
	} from "@/api/useryk.js"
	// import { hdvideo_hb_suan ,vo_pic_dz } from "@/api/video.js"
	import Auth from '@/libs/wechat.js'
	import {refreshCurrentPage} from "@/utils/base.js"
	import {Resource_url, Http_url} from "@/config/config.js"
	export default {
		computed:{...mapGetters(['userInfou', 'isUserLogin','isLogin', 'globalData', 'user_uid'])},
		components:{
			videoShow,
            lrlDragPanel,
			dianzan
		},
		data() {
			return {
                Http_url,
				adminUrl:Resource_url,
				id:0,
				hbimg:'../../static/images/hb_btn.png',
				isShowHb:false,//是否显示红包弹窗
				isPlay:false,//是否自动开始播放
				videoInfo:{},//视频数据	
				tabindex:1,			
				// tablist:['评论互动','有奖答题','分享海报','红包规则'],
				tablist:['评论互动','有奖答题'],
				problemList:[],//问题列表
				qu_ids:[],//问题id
				daan:[],//问题答案
				isPay:false,//是否购物
				sum:1,//商品数量
				user_name:'',
				user_address:'',
				user_tel:'',
				totalPrice:0,
				isAnswer:false,//是否可提交答案
				isGz:false,//是否显示鼓掌
				isShowList:true,//是否显示问题列表
				isShowVideo:true,//该视频是否有权限可看
                isReceiveHb: false, //是否已领取过红包
                isDt: false ,//是否已答题过 
                speciesShowImgs: [
                    Http_url + '/static/images/jinbitow.png'
                ],
                likeShowImgs: [
                    Http_url + '/static/images/dianzan.png'
                ],
                // 可以点击金币点赞的几个时间段
                speciesTimeList: [],
                // 当前视频播放位置
                videoCurrentTime: 0 ,
                // 累计金币点赞数量
                accumulateCount: 0,
                currentLikeNode: null,
                currentLikeNodeIndex: -1,
				platform:'',//系统类型
				videoDuration:0,//播放时长
				isComm:false,//是否开启评论
				isGiftShow:false,//是否显示礼物图片
				giftList:[],//图标列表
				commList:[],//评论列表
				msg:'',//评论信息
				gift_id:0,//礼物图片
				isSend:false,//是否发送
				scrollTop:0,//滚动位置
				commHeight:1051,//评论高度
				interval: null, // 存储定时器
				scrollHeight: 0, // 每个元素的高度
				isShowA:false,//视频结束提醒答题
				showCl:false,//是否滚动
				tips:'视频未播放完成，无法答题哦',//
				hbType:1,//红包获取方式，1未视频播放发送红包，2未答题直接获取红包
				hbPrice:'0.00',//红包金额
				showJf:false,//是否有积分商城
				isHpShow:false,//是否横屏
				vstyle:{},//视频样式
				hbstyle:{},//红包样式
				hbimgStyle:{},
				dzStyle:{},//点赞样式
				tostStyle:{},//横屏提示样式
				tostTitle:'',//横屏提示
				isZoomeds:false,
				isZoomed:false,
				// dzType:'gz',//点赞类型，gz为鼓掌，jb为金币
			};
		},
		onLoad(option) {
			if(!option.id){
				// this.$util.Tips({
				// 	title:'参数错误'
				// })
				return;
			}else{
				this.id = option.id
				this.$store.commit("SETVID", this.id);
                this.getLikeConfig()
               
				setTimeout(()=>{
					if(!this.$store.getters.isUserLogin){
						toUserLogin()
					}else{
						// console.log('isLogin',this.isLogin)
						// console.log('isUserLogin',this.$store.getters.isUserLogin)
						// console.log('userInfou',this.$store.getters.userInfou)
						let glodData = JSON.parse(uni.getStorageSync('GLOBAL_DATA'))
						this.platform = glodData.platform
						// console.log('glodDatass',glodData)
						 let qun_id = option.qun_id !== '' && option.qun_id !== undefined && option.qun_id !== null ? option.qun_id : glodData.qun_id
						 glodData.qun_id = qun_id
						this.$store.commit('GET_GLOBAL', glodData);
						this.userVideoYN()
						this.getVideoInfo()
						this.getVideoQuestion()
						this.getGift()
						this.getComment()
					}
				},100)
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
            
   //          this.speciesAudioContext = uni.createInnerAudioContext();
   //          this.speciesAudioContext.autoplay = false;
   //          this.speciesAudioContext.src = window.location.origin + '/static/audio/jingbi.mp3';
    
   //          this.likeAudioContext = uni.createInnerAudioContext();
   //          this.likeAudioContext.autoplay = false;
   //          this.likeAudioContext.src = window.location.origin + '/static/audio/guzhang.mp3';
   
		},
        computed: {
            // 是否显示点金币按钮
            // showSpecies(){
            //     const { videoInfo, speciesTimeList, videoCurrentTime } = this
            //     if(videoInfo.is_dzhb_zt == 1){
            //         // 查找当前视频播放位置是否在可以点赞时间区间
            //         return this.currentLikeNodeIndex >= 0 ? !this.currentLikeNode.autoLoading : false
            //     }else {
            //         return false
            //     }
            // },
            dzType(){
                const { videoInfo, speciesTimeList, videoCurrentTime } = this
                if(videoInfo.is_dzhb_zt == 1){
                    // 查找当前视频播放位置是否在可以点赞时间区间
					let showSpecies = this.currentLikeNodeIndex >= 0 ? !this.currentLikeNode.autoLoading : false
                    return showSpecies ? 'jb':'gz'
                }else {
                    return 'gz'
                }
            }
        },
        watch: {
            currentLikeNodeIndex(num){
				// console.log('currentLikeNodeIndex',num)
                this.accumulateCount = 0
            },
            videoCurrentTime(times){
                const { videoInfo, speciesTimeList } = this
                
                // 查找当前视频播放位置是否在可以点赞时间区间，获取索引
                this.currentLikeNodeIndex = speciesTimeList.findIndex((item) => {
                    return times >= item.qi_time &&  times <= item.end_time
                }) 
				// console.log('currentLikeNodeIndex',this.currentLikeNodeIndex)
                // 节点
                this.currentLikeNode = speciesTimeList[this.currentLikeNodeIndex]
				
                // 提示时长
                let duration = 2000,
                // 提前两秒提示
                    toastTime = times + 2
                
                let is = speciesTimeList.some((item) => {
                    return Math.floor(toastTime) == Math.floor(item.qi_time)
                }) 
                if(is){
                    this.$refs['autoToast'].open({
                        content: '右下角疯狂点赞领红包！',
                        duration,
						styleo: this.tostStyle
                    })
                }
            }
        },
		mounted() {
            // this.vo_integral_user()
		},
		beforeDestroy() {
		    // 清除定时器
		    this.stopAutoScroll();
		},
		methods:{
			changeQp(i){
				if(i==1){
					this.isHpShow = true
					// this.goFullScreen()
					// const env = uni.getEnv();
					const systemInfo = uni.getSystemInfoSync();
					
					const query = uni.createSelectorQuery().in(this);
					  query.select('.page').boundingClientRect(data => {
						if (data) {
							let trans = '',vsW = '', vsH = '', pos='', top='', left='', dzleft = ''
							if (systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {
								trans = 'rotate(0deg)'
								vsW = '100vw'
								vsH = '100vh'
								pos = 'fixed'
								top = '0'
								left = '0'
								dzleft = 'calc(100% - 75px)'
							}else{
								trans = 'rotate(90deg)'
								vsW = '100vh'
								vsH = '100vw'
								pos = 'absolute'
								top = -(data.width-data.height)/2+'px'
								left = (data.width-data.height)/2+'px'
								dzleft = '25px'
							}
					// 		console.log('data',data)
						  this.vstyle ={
								width:vsW,
						  		height:vsH,
						  		position:pos,
						  		top:top,
						  		left:left,
						  		borderRadius:'0',
						  		zIndex:'10',
						  		transform: trans
						  	}
						  this.hbstyle={
								width:'100vh',
						  		height:'100vw',
								top:'366rpx',
								left:'-368rpx',
								transform: trans
						  }
						  this.hbimgStyle={
							  width:'375px',
							  left:'27%'
						  }
						  this.dzStyle = {
							  position:pos,
							  bottom:'20px',
							  left:dzleft,
							  transform: trans,
							  zIndex:'999',
						  }
						  this.tostStyle={
							 top:'33%',
							 left: '54%',
							 transform: trans, 
							 animation: 'none'
						  }
						}
					  }).exec();
				}else{
					this.isHpShow = false
					this.vstyle ={
						weidth:'100%',
						height:'354rpx',
					}
					this.hbstyle={}
					this.hbimgStyle={}
					this.dzStyle={}
					this.tostStyle = {}
				}
			},
            vo_integral_user(){
                vo_integral_user({
                    id: this.id
                }).then(res => {
                    if(res.sum > 0){
                        uni.showModal({
                            showCancel: false,
                            title: '恭喜您获得' + res.sum + '积分'
                        })
                    }
                }).catch(e => {
                    console.log(e)
                })
            },
			startAutoScroll() {
			  if (this.interval) return;
			  if (this.commList.length == 0) return;
			  this.interval = setInterval(() => {
				  this.getComment()
				// let commHeight = document.querySelector('.comm-list').offsetHeight
				// this.scrollTop += commHeight; // 每次滚动的像素，可根据需求调整
				// if (this.scrollTop >= this.commList.length * commHeight) {
				//   this.scrollTop = 0; // 到达末尾，重置scrollLeft
				// }
				// console.log('scroll',this.scrollTop)
			  }, 1500); // 滚动速度，可根据需求调整
			},
			stopAutoScroll() {
			  if (this.interval) {
				clearInterval(this.interval);
				this.interval = null;
			  }
			},
			scroll(e){
				// console.log('e',e)
			},
			//拉到底部事件
			scrolltolower(e){
				// this.scrollTop = 0
			},
			//滚动到底部
			gotoBottom(){
				if (this.commList.length == 0) return;
				setTimeout(()=>{
					this.scrollHeight = document.querySelector('.comm-list').offsetHeight
					// this.commHeight = this.commList.length * this.$util.pxTorpx(this.scrollHeight)
					let scrollcomm = document.getElementById('scrollcomm').offsetHeight
					let comment = document.getElementById('comment').offsetHeight
					if(comment > scrollcomm){
						this.scrollTop = this.$util.pxTorpx(comment - scrollcomm)
					}else{
						this.scrollTop = this.$util.pxTorpx(comment)
					}
					// console.log('this.scrollTop',this.scrollTop)
				},150)
			},
			changeComm(){
				this.isSend = true
			},
			blurComm(){
				this.isSend = false
				if(this.msg !== '' && (!this.msg || !/^\s+$/.test(this.msg))){
					this.sendComment()
				}
			},
			sendGift(id){
				this.gift_id = id
				this.isGiftShow = false
				this.sendComment()
			},
			showGift(){
				this.isGiftShow = !this.isGiftShow
			},
			// 获取礼物图标
			getGift(){
				getGiftList(this.id).then(res=>{
					this.giftList = res.data
				})
			},
			// 根据视频id查询评论
			getComment(){
				getCommentList(this.id).then(res=>{
					this.commList = res.data
					// this.showCl = this.commList.length > 5
					this.gotoBottom()
					// this.commHeight = this.commList.length * this.scrollHeight
					// this.scrollTop = this.$util.rpxTopx(this.commHeight)
					// console.log('scrollTop',this.scrollTop)
				})
			},
			// 发送评论
			sendComment(){
				let that = this
				let param = {
					id:that.id,
					gift_id:that.gift_id !== 0 ? that.gift_id : '',
					text:that.msg
				}
				sendComment(param).then(res=>{
					that.getComment()
					that.gift_id = 0
					that.msg = ''
					that.isSend = false
				}).catch(err=>{
					that.$util.Tips({
						title:err
					})
				})
			},
            // 获取金币点赞的时间段
            getLikeConfig(){
                hdvideo_hb_suan({
                    id: this.id
                }).then(res => {
                    this.speciesTimeList = res.data.map(item => {
                        return {
                            ...item,
                            autoLoading: false,
                            received: false,
                        }
                    })
					// this.currentLikeNode = this.speciesTimeList[0]
					// console.log('currentLikeNode',this.currentLikeNode)
                }).catch(err => {
                    
                })
            },
            // 监听视频播放
            timeupdate(e){
                const { currentTime } = e.detail
                this.videoCurrentTime = currentTime
            },
			// 刷新页面
			refresh(){
				// this.editVideoTime()
				refreshCurrentPage()
			},
			goto(url){
				uni.navigateTo({
					url:url
				})
			},
			//判断用户是否能看这个视频 
			userVideoYN(){
				userVideoYN(this.id).then(res=>{
                    this.isReceiveHb = res.data.is_zt_hb === 1
                    this.isDt = res.data.is_dt === 1
					this.isShowVideo = true
					this.showJf = res.data.is_jfshopp === 1
					// console.log('showJf',this.showJf)
				}).catch(err=>{
					this.isShowVideo = false
				})
			},
			//视频播放完毕
			overplay(totalTime){
				this.isAnswer = true
				this.isShowA = true
				this.videoDuration = totalTime
				// this.editVideoTime()
				this.vo_integral_user()
			},
			// 减少数量
			subCart(){
				this.sum = this.sum == 1 ? 1: Number(this.sum-1);
				if(this.sum > 0){
					this.jsTotal()
				}
			},
			// 添加数量
			addCart(){
				this.sum = Math.min(this.videoInfo.pr_max_sum, this.sum + 1);
				this.jsTotal()
			},
			//计算总金额
			jsTotal(){
				let price = this.videoInfo.pr_price !== '' && this.videoInfo.pr_price !== null && this.videoInfo.pr_price !== undefined ? this.videoInfo.pr_price : 0
				this.totalPrice = parseFloat(this.sum * price)
			},
			goAnswer(){
				if(this.isHpShow){
					this.isHpShow = false
					this.$refs.videoShow.landPlay()
				}
				this.isShowA=false
				this.changTab(1)
			},
			// 切换tab
			changTab(index){
				this.tabindex = index
				if(index == 0){
					this.startAutoScroll()
					this.gotoBottom()
					// this.calculateHeight()
				}else{
					this.isGiftShow = false
					this.stopAutoScroll()
				}
			},
			// 获取视频信息
			getVideoInfo(){
				getVideoInfo(this.id).then(res=>{
					// console.log('getVideoInfo',res)
					this.videoInfo=res.data
					this.videoInfo.vo_files='http://'+this.videoInfo.vo_files.replace(/\\/g, "/")
					this.videoInfo.fx_img=this.adminUrl+this.videoInfo.fx_img.replace(/\\/g, "/")
					this.videoInfo.img=this.adminUrl+this.videoInfo.img.replace(/\\/g, "/")
					this.videoInfo.le_files=this.adminUrl+this.videoInfo.le_files.replace(/\\/g, "/")
					this.videoInfo.pr_files=this.adminUrl+this.videoInfo.pr_files.replace(/\\/g, "/")
					this.videoInfo.vi_img=this.adminUrl+this.videoInfo.vi_img.replace(/\\/g, "/")
					this.isComm = this.videoInfo.is_comm == 1
					if(this.isComm) {
						this.changTab(0)
					}
                    this.jsTotal()
                    
                    Auth.share({
                        title: res.data.fx_title,
                        desc: res.data.fx_con,
                        imgUrl: Resource_url + res.data.fx_img,
                    })
					this.getPosterFile()
				}).catch(err=>{
					this.$util.Tips({
						title:'视频已下架（暂时无法播放）'
					})
				})
			},
			getPosterFile(){
				posterFile().then(res=>{
					if(res.data !== null){
						this.videoInfo.posterFile = res.data.files
					}
				})
			},
			// 获取问题
			getVideoQuestion(){
				getVideoQuestion(this.id).then(res=>{
					// console.log('getVideoQuestion',res)
					this.problemList=res.data
					this.problemList.forEach(item=>{
						let answer = [
							{
								txt:item.xuan_one,
								daan:1,
								selected:false
							},
							{
								txt:item.xuan_tow,
								daan:2,
								selected:false
							}
						]
						item.answer = answer
						item.key = ''
					})
				}).catch(err=>{
					this.$util.Tips({
						title:err
					})
				})
			},
			//打开红包
			openHbao(type){
				// console.log('type',type)
				// console.log('isReceiveHb',this.isReceiveHb)
				this.hbType = type
                // if(){
				if(this.hbType === 1 && !this.isReceiveHb){
					this.hbPrice = this.videoInfo.hb_pic
				}
				if(this.hbType === 2){
					this.hbPrice = this.videoInfo.dt_hbpic
				}
				this.isShowHb = true
				// this.isPlay = false
				
				// 5秒后关闭
				setTimeout(() => {
					this.isShowHb = false
				}, 15000)
                // }
				
			},
			// 获取红包
			getHbao(){
				this.isZoomed = true
				setTimeout(()=>{
					this.isZoomed = false
				},2000)
				// return;
				this.isPlay = true
				this.isShowHb = false
				if(this.hbType === 1){
					this.isReceiveHb = true
					this.getVideoHb()
				}
				if(this.hbType === 2){
					this.getVideoDatiHb()
				}
			},
			// 获取视频红包
			getVideoHb(){
                // 防抖
                if(this.HbaoLoaidng) return
                this.HbaoLoaidng = true
				getVideoHB(this.id).then(res=>{
					// this.isPlay = true
					// this.isShowHb = false
                    // this.isReceiveHb = true
                    this.HbaoLoaidng = false
					// if(this.isHpShow){
					// 	this.tostTitle = '红包发放成功！金额：' + this.videoInfo.hb_pic + '元'
					// 	setTimeout(()=>{
					// 		this.tostTitle = ''
					// 	},1500)
					// }else{
					// 	uni.showToast({
					// 		title: '红包发放成功！金额：' + this.videoInfo.hb_pic + '元'
					// 	})
					// }
					this.showTost('红包发放成功！金额：' + this.videoInfo.hb_pic + '元')
				}).catch(err=>{
					this.showTost(err)
					// this.$util.Tips({
					// 	title:err
					// })
					// this.isPlay = true
					// this.isShowHb = false
                    this.HbaoLoaidng = false
				})
			},
			//选择答案
			selected(p,r){
				if(this.qu_ids.indexOf(this.problemList[p].id) === -1){
					this.qu_ids.push(this.problemList[p].id)
					this.daan.push(this.problemList[p].answer[r].daan)
				}else{
					this.qu_ids[p] = this.problemList[p].id
					this.daan[p] = this.problemList[p].answer[r].daan
				}
				this.problemList[p].answer.forEach((pr,rr)=>{
					if(r===rr){
						this.$set(pr,'selected',true)
					}else{
						this.$set(pr,'selected',false)
					}
				})
				this.$forceUpdate();
			},
			// 预定商品
			pay(){

				if (!this.user_tel) return this.$util.Tips({
					title: '请填写手机号码！'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.user_tel))) return this.$util.Tips({
					title: '请输入正确的手机号码！'
				});
                
                // 防抖
                if(this.payLoading) return
                this.payLoading = true
                
				let param = {
					id:this.id,
					user_name:this.user_name,
					user_address:this.user_address,
					sum:this.sum,
					user_tel:this.user_tel
				}
                uni.showLoading({
                    title: '支付中'
                })
				wxpay(param).then(res=>{
                    const payData = JSON.parse(res.data)
                    let req = {
                        timeStamp: payData.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						timestamp: payData.timeStamp,
                        // appId: payData.appId, // 商户号
                        nonceStr: payData.nonceStr, // 支付签名随机串，不长于 32 位
                        package: payData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）  
                        signType: payData.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
                        paySign: payData.paySign, // 支付签名
                    }
                    // console.log('req',req)
                    Auth.pay(req).then(res => {
                        uni.hideLoading()
                        this.isPay = false
                        this.payLoading = false
                    }).catch(err => {
                        uni.hideLoading()
                        this.isPay = false
                        this.payLoading = false
                    })
				}).catch(err=>{
                    console.log(err)
                    uni.hideLoading()
					this.$util.Tips({
						title:err
					})
                    this.payLoading = false
				})
			},
			// 提交答案
			upAnswer(){
				this.isZoomeds = true
                if(this.isDt){
                    this.$refs['autoToast'].open({
                        content: '您已经答过题了！'
                    })
                    return
                }
				if(!this.isAnswer){
                    this.$refs['autoToast'].open({
                        content: '请在视频播放完毕后提交答案'
                    })
                    // this.$util.Tips({
                    // 	title:'请在视频播放完毕后提交答案'
                    // })
                    return
                }
				this.testQuestion()
			},
			testQuestion(){
				if(this.daan.length !== this.problemList.length){
					this.$refs['autoToast'].open({
					    content: "请回答完所有问题后提交答案"
					})
					return;
				}
				let param = {
					id:this.id,
					qu_ids:this.qu_ids.join(),
					daan:this.daan.join()
				}
				testQuestion(param).then(res=>{
                    this.$refs['autoToast'].open({
                        content: '答案正确'
                    })
					// this.$util.Tips({
					// 	title:'答案正确'
					// })
					this.userVideoYN()
                    if(this.videoInfo.is_hbms == 1){
						setTimeout(() => {
							this.$u.route('/pages/draw/draw', { id: this.id })
						}, 2000)
					}else{
						this.openHbao(2)
					}
				}).catch(err=>{
					// this.$util.Tips({
					// 	title:err
					// })
                    this.$refs['autoToast'].open({
                        content: err
                    })
				})
			},
			// 获取答题红包
			getVideoDatiHb(){
				if(this.HbaoLoaidng) return
				this.HbaoLoaidng = true
				let param={
					id:this.id
				}
				vo_pic_js_dati(param).then(res=>{
					// this.isShowHb = false
					// this.HbaoLoaidng = false
					// if(this.isHpShow){
					// 	this.tostTitle = '红包发放成功！金额：' + this.videoInfo.dt_hbpic + '元'
					// 	setTimeout(()=>{
					// 		this.tostTitle = ''
					// 	},1500)
					// }else{
					// 	uni.showToast({
					// 		title: '红包发放成功！金额：' + this.videoInfo.dt_hbpic + '元'
					// 	})
					// }
					this.showTost('红包发放成功！金额：' + this.videoInfo.dt_hbpic + '元')
				}).catch(err=>{
					this.showTost(err)
					// this.$util.Tips({
					// 	title:err
					// })
					// this.isShowHb = false
     //                this.HbaoLoaidng = false
				})
			},
			// 显示提示文本
			showTost(txt){
				if(this.isHpShow){
					this.tostTitle = txt
					setTimeout(()=>{
						this.tostTitle = ''
					},1500)
				}else{
					uni.showToast({
						title: txt
					})
				}
			},
			videoErrorCallback: function(e) {
				console.log('e',e)
				// uni.showModal({
				// 	content: e.target.errMsg,
				// 	showCancel: false
				// })
			},
            /**
             * 处理连续金币点赞
             */
            handleSpeciesClick(){
                // if(this.timeId){
                //     clearTimeout(this.timeId)
                // }
                // this.timeId = setTimeout(() => {
                //     this.accumulateCount = 0
                // }, 1000)
                
                this.accumulateCount ++
				console.log(this.accumulateCount)
                this.speciesAudio()
                
                const { currentLikeNodeIndex, currentLikeNode } = this
                
                if(currentLikeNodeIndex >= 0 && !currentLikeNode['autoLoading']){
                    const { dz_sum, pic } = currentLikeNode
                    // 点赞数量累计到触发点！
                    if(this.accumulateCount >= dz_sum){
                        // 自定义请求状态
                        currentLikeNode['autoLoading'] = true
                        vo_pic_dz({
                            id: this.id ,
                            lk_id: this.currentLikeNode.id
                        }).then(res => {
                            // 设置自定义领取状态
                            this.speciesTimeList[currentLikeNodeIndex]['received'] = true
                            // this.accumulateCount = 0
							// if(this.isHpShow){
							// 	this.tostTitle = '红包发放成功！金额：' + pic + '元'
							// 	setTimeout(()=>{
							// 		this.tostTitle = ''
							// 	},1500)
							// }else{
							// 	uni.showToast({
							// 		title: '红包发放成功！金额：' + pic + '元'
							// 	})
							// }
							this.showTost('红包发放成功！金额：' + pic + '元')
                        }).catch(err => {
							this.showTost(err)
                            // uni.showToast({
                            //     title: err,
                            //     icon: 'none'
                            // })
                        })
                    }
                }
            },
            speciesAudio(){
                // 开启此注释可以打断上次播放
                // this.speciesAudioContext.stop()
                // this.speciesAudioContext.play()
            },
            /**
             * 处理连续点赞
             */
            handleLikeClick(){
                 // 开启此注释可以打断上次播放
                // this.likeAudioContext.stop()
                // this.likeAudioContext.play()
            },
            shoppClick(){
                if(this.videoInfo.pr_id){
                    this.isPay = !this.isPay 
                }else {
                    uni.showToast({
                        title: "此视频没有商品",
                        icon: 'none'
                    })
                }
                 
            },
			changeDuration(time){
				this.videoDuration = time
				uni.setStorageSync('videoDuration',this.videoDuration)
				// console.log('videoDuration',this.videoDuration)
			},
			//上传播放时长
			// editVideoTime(){
			// 	let param = {
			// 		id:this.id,
			// 		duration:this.videoDuration
			// 	}
			// 	editVideoTime(param).then(res=>{
			// 		// this.$util.Tips({
			// 		// 	title:'上传成功'
			// 		// })
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	.page{
		position: relative;
	}
	.video-page{
		width: 100%;
		min-height: 100vh;
		height: 100%;
		background-color: #FFE9C3;
		background-position: top;
		background-size: contain;
		background-repeat: no-repeat;
		
	}
	.guzhang{
		position: relative;
	}
	.zoomable{
		animation: zoomInOut 1s infinite;
	}
	/* 定义动画 */
	@keyframes zoomInOut {
	  0%{
	    transform: scale(1); /* 缩小到50% */
	  }
	  50% {
	    transform: scale(0.95); /* 放大到100% */
	  }
	  100% {
	    transform: scale(1); /* 放大到100% */
	  }
	}
	.bz-num{
		position: absolute;
		top: -30rpx;
		left: 20rpx;
		padding: 0 20rpx;
		border: #FF3E62 2rpx solid;
		color: #FF3E62;
		border-radius: 40rpx;
		font-size: 24rpx;
	}
	.videobox{
		width: 100%;
		// height: 576rpx;
		padding: 20rpx;
		.videoinfo{
			padding: 10rpx;
			.video{
				width: 100%;
				height: 344rpx;
				// min-height: 344rpx;
				// max-height: 1044rpx;
				background-color: #FFE9C3;
				border-radius: 20rpx;
				overflow: hidden;
			}
			.info{
				padding: 0 10rpx;
			}
			.name{
				padding-top: 10rpx;
                white-space: nowrap; 
                overflow: hidden;
                text-overflow: ellipsis; 
			}
			.avatar{
				width: 48.83rpx;
				height: 48.83rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 10rpx;
			}
			.refresh{
				border: 2rpx #fff solid;
				border-radius: 40rpx;
				padding: 4rpx 10rpx;
			}
		}
	}
	.mainl{
		height: calc(100vh - 710rpx);
	}
	.mains{
		min-height: calc(100vh - 710rpx);
	}
	.content{
		.company{
			height: 680rpx;
			image{
			}
		}
	}

	.comment{
		height: 620rpx;
		overflow: hidden;
		.comm-list{
			.avatar{
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				margin-right: 10rpx;
				image{
					border-radius: 50%;
				}
			}
			.files{
				width: 88rpx;
				height: 88rpx;
			}
		}
	}
	.problem{
		.tips{
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			background: linear-gradient( 270deg, rgba(255,62,97,0) 0%, #FF3E61 20%, #FF3E61 79%, rgba(255,62,97,0) 100%);
			border-radius: 9px;
			color: #FFFFFF;
			text-align: center;
		}
		.tabbox{
			margin-top: 20rpx;
			.item{
				padding: 0 10rpx;
				margin-right: 20rpx;
				padding-bottom: 20rpx;
			}
			.checked{
				text-align: center;
				font-weight: 600;
				background-image: url('../../static/images/tab_xb.png');
				background-position: bottom;
				background-repeat: no-repeat;
				background-size: 60%;
			}
		}
		.problem-list{
			.item{
				.prob{
					.dx{
						font-size: 24rpx;
						color: #FF3E62;
						padding: 0 6rpx;
						border-radius: 8rpx;
						border: 2rpx solid #FF3E62;
						margin-right: 6rpx;
					}
				}
				.prob-list{
					.checked{
						border: 2rpx solid #FF3E62;
						.iconfont{
							color: #FF3E62;
						}
					}
				}
			}
		}
	}
	.submitbox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		.pay{
			width: 96rpx;
			height: 96rpx;
			overflow: hidden;
			border-radius: 50%;
		}
	}
	.btnbox{
		position: relative;
		width: calc(100% - 146rpx);
		height: 136rpx;
		.btn-box{
			width: 100%;
			height: 100%;
			background-image: url('../../static/images/btn_bg.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
		}
		.hbbg{
			position: absolute;
			bottom: 45rpx;
			left: 30rpx;
			width: 116rpx;
			height: 114rpx;
			background-image: url('../../static/images/hb_bg.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}
		.btn{
			margin-left: 50rpx;
			// margin-top: -20rpx;
			// font-size: 36rpx !important;
		}
	}
	.btnbox:active{
		opacity: 0.8;
	}
	.baiz{
		// width: 136rpx;
		// height: 136rpx;
		
		.baiz-bg{
			width: 116rpx;
			height: 124rpx;
			background-image: url('../../static/images/baiz_bg2.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}
		.baiz-bg2{
			width: 96rpx;
			height: 104rpx;
			background-image: url('../../static/images/baiz_bg2.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
	.guzhang{
		// width: 136rpx;
		// height: 136rpx;
		
		.guzhang-img{
		   width: 96rpx;
		   height: 104rpx;
		   background-image: url('../../static/images/jinbi.png');
		   background-position: center;
		   background-repeat: no-repeat;
		   background-size: cover;
		}
		.guzhang-img2{
		   width: 96rpx;
		   height: 104rpx;
		   background-image: url('../../static/images/jinbi.png');
		   background-position: center;
		   background-repeat: no-repeat;
		   background-size: cover;
		}
	}
	.txmid{
		width: 604rpx;
		height: 320rpx;
        position: relative;
		border-radius: 40rpx;
		.btn{
			width: 80%;
			text-align: center;
		}
	}
	.hbmid{
		width: 100%;
		height: 844rpx;
        position: relative;
        .hbmid-text{
            position: absolute;
            z-index: 10;
            top: 30%;
            left: 0;
            right: 0;
            text-align: center;
            .hbmid-text-desc{
                color: #ead491;
            }
            .hbmid-text-val{
                color: #FFE79E;
                margin-top: 30rpx;
                vertical-align: bottom;
                .hbmid-symbol{
                    font-size: 32rpx;
                }
                .hbmid-num{
                    font-size: 80rpx;
                    font-weight: bold;
                }
                .hbmid-unit{
                    font-size: 40rpx;
                }
            }
        }
		.btn{
			width: 198rpx;
			height: 198rpx;
			background-image: url('../../static/images/qiang.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			position: absolute;
			bottom:23%;
			left: calc(50% - 102rpx);
			z-index: 99;
		}
		image{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}
	.prictre{
		width: 200rpx;
		height: 200rpx;
		border-radius: 24rpx;
		overflow: hidden;
	}
	.prinfo{
		width: calc(100% - 210rpx);
	}
	.carnum{
		text-align: center;
		.reduce{
			width: 40rpx;
			height: 40rpx;
			line-height: 24rpx;
			text-align: center;
			font-size: 42rpx;
			border: 2rpx solid #979797;
		}
		.num{
			width: 72rpx;
			height: 40rpx;
			line-height: 30rpx;
			border: 2rpx solid #979797;
			margin: 0 10rpx;
			font-weight: 600;
		}
		.plus{
			width: 40rpx;
			height: 40rpx;
			line-height: 24rpx;
			text-align: center;
			font-size: 42rpx;
			border: 2rpx solid #979797;
		}
		.on{
			background-color: #FEA40B;
			border: 2rpx solid #FEA40B;
			color: #fff;
		}
	}
	.infobox{
		.info-item{
			width: 100%;
			.left{
				margin-right: 20rpx;
			}
			.right{
				width: calc(100% - 80rpx);
			}
		}
		input{
			height: 100rpx;
		}
	}
	.submitbtn{
		text-align: center;
		color: #fff;
	}
	.upoup-mid{
		padding: 50rpx 30rpx;
		.pictrue {
			width: 314rpx;
			height: 236rpx;
			margin: 0 auto 15rpx auto;
			image {
				width: 100%;
				height: 100%
			}
		}
		.text-ccc{
			text-align: center;
			width: 60%;
			display: block;
			margin: auto;
			margin-top: 20rpx;
		}
	}
    .shopbox{
		position: fixed;
		right: 40rpx;
		bottom: 20%;
		width: 132rpx;
		height: 162rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(184,9,0,0.37), inset 0rpx 2rpx 0rpx 0rpx rgba(255,236,236,0.9);
		
		.imgbox{
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
			border: 4rpx solid transparent;
			border-image: linear-gradient(360deg, rgba(255, 119, 119, 1), rgba(255, 244, 117, 1)) 4;
			clip-path:inset(0 round 8rpx);
		}
		.pay{
			position: absolute;
			bottom: -14rpx;
			left: 20%;
			background-color: #FF3E62;
			border-radius: 40rpx;
			color: #fff;
			padding: 5rpx 18rpx;
		}
	}
	.submitbox1{
		position: fixed;
		height: 124rpx;
		background: #FFFFFF;
		z-index: 9;
		.input-box{
			height: 88rpx;
			background: rgba(0,0,0,0.03);
			padding:10rpx 25rpx;
			overflow: hidden;
			textarea{
				width: calc(100% - 10rpx);
				height: 100%;
				font-size: 30rpx;
			}
		}
		.giftbt{
			left: 0;
			width: 96rpx;
			height: 104rpx;
		}
	}
	.submitbox2{
		left: 20rpx;
		bottom: 50rpx;
		width: calc(100% - 40rpx);
		box-shadow: 0rpx 8rpx 14rpx 0rpx rgba(119,17,17,0.27);
		border-radius: 63rpx;
		.input-box{
			width: 400rpx;
			border-radius: 44rpx;
		}
		.placehstyle{
			left: 20rpx;
			margin-top: 10rpx;
			margin-left: 20rpx;
		}
		.bz-num{
			left:6rpx !important;
		}
	}
	.submitbox3{
		bottom: 0;
		width: 100%;
		.input-box{
			width: 85%;
			border-radius: 10rpx;
		}
		.send{
			border-radius: 40rpx;
			padding: 10rpx 20rpx;
			
		}
	}
	.giftbox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 446rpx;
		background-color: #FFFFFF;
		border-top:2rpx solid #EBEBEB;
		.giftls{
			margin-top: 20rpx;
			.gift{
				width: 116rpx;
				// height: 116rpx;
				margin-right: 20rpx;
				text-align: center;
				.img{
					width: 116rpx;
					height: 116rpx;
					border-radius: 10rpx;
					border: 2rpx solid #F1F1F1;
					image{
						width: 86rpx;
						height: 86rpx;
					}
				}
				.title{
					width: 100%;
				}
			}
		}
	}

	.tostbox{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		position: fixed;
		top: calc(50vh - 160rpx);
		left: calc(50vw - 160rpx);
		z-index: 999;
		width: 320rpx;
		min-height: 320rpx;
		background-color: rgba(0,0,0,0.6);
		color: #F1F1F1;
		border-radius: 20rpx;
		padding: 20rpx;
		transform: rotate(90deg);
		.tost{
			width: 100%;
			line-height: 40rpx;
			word-wrap: break-word;
			white-space: normal;
		}
	}
</style>
